<!-- 登录 -->
<template>
    <div class="wrapper">
        <van-nav-bar left-text="返回" left-arrow @click-left="onClickLeft" />
        <h2>亲，欢迎登录</h2>
        <van-form @submit="onSubmit">
            <van-cell-group inset>
                <van-field v-model="username" name="username" label="用户名" placeholder="用户名"
                    :rules="[{ required: true, message: '请填写用户名' }]" />
                <van-field v-model="password" type="password" name="password" label="密码" placeholder="密码"
                    :rules="[{ required: true, message: '请填写密码' }]" />
            </van-cell-group>
            <div style="margin: 16px;">
                <van-button round block color="#d30707" native-type="submit">
                    一键登录
                </van-button>
            </div>
            <p @click="toRegist">没有账号？ 点此<a class="color-red">注册</a></p>
        </van-form>
    </div>
</template>

<script setup lang='ts'>
import { useMemberLogin ,useMemberRegister} from '@/hook/login'

import { ref } from 'vue';
const { onSubmit,
    onClickLeft, username,
    password, } = useMemberLogin()
const {toRegist}=useMemberRegister()

</script>

<style lang='scss' scoped>
.wrapper {
    padding: 10px 40px;

    .van-form {

        min-width: 400px;
        margin: auto;
        padding: 30px;
        border-radius: 30px;

        .h2 {
            text-align: center;
        }

        p {
            line-height: 40px;
            text-align: center;
            font-size: 16px;

            .color-red {
                font-size: 16px;
                color: red;
                font-style: oblique;
            }
        }
    }
}
</style>
